<template>
  <view class="container">
    <!-- 顶部导航栏 -->
    <view class="header">
      <view class="header-left">
        <text class="page-title">仓库管理看板</text>
        <text class="warehouse-info">仓库编号: WH-2023-005 | 华东区域中心仓库</text>
      </view>
      <view class="header-right">
        <view class="datetime-card">
          <text class="current-date">{{ currentDate }}</text>
          <text class="current-time">{{ currentTime }}</text>
        </view>
      </view>
    </view>

    <!-- 数据概览卡片 -->
    <view class="stats-container">
      <view class="stat-card">
        <text class="stat-title">仓库总面积</text>
        <text class="stat-value">8,500 m²</text>
        <text class="stat-trend">较上月增长 2.4%</text>
      </view>
      <view class="stat-card">
        <text class="stat-title">仓库总容积</text>
        <text class="stat-value">25,600 m³</text>
        <text class="stat-trend">较上月增长 1.8%</text>
      </view>
      <view class="stat-card">
        <text class="stat-title">已用容积</text>
        <text class="stat-value">18,200 m³</text>
        <text class="stat-trend">使用率 71.1%</text>
      </view>
      <view class="stat-card">
        <text class="stat-title">员工出勤</text>
        <text class="stat-value">42/45 人</text>
        <text class="stat-trend">出勤率 93.3%</text>
      </view>
    </view>

    <!-- 主要内容区域 -->
    <view class="main-content">
      <!-- 左侧区域：容积趋势和存储区 -->
      <view class="left-panel">
        <!-- 7天容积趋势图 -->
        <view class="panel-card">
          <view class="panel-header">
            <text class="panel-title">已用容积7天趋势</text>
            <view class="chart-period-selector">
              <button class="period-btn active">日</button>
              <button class="period-btn">周</button>
              <button class="period-btn">月</button>
            </view>
          </view>
          <view class="chart-container">
            <canvas id="volumeTrendChart" canvas-id="volumeTrendChart" class="chart"></canvas>
          </view>
        </view>

        <!-- 存储区情况 -->
        <view class="panel-card">
          <text class="panel-title">存储区情况</text>
          <view class="storage-areas">
            <!-- 普通存储区 -->
            <view class="storage-area normal">
              <view class="area-header">
                <text class="area-name">普通存储区</text>
                <text class="area-slots">520个库位</text>
              </view>
              <view class="area-info">
                <view class="info-item">
                  <text class="info-label">温度:</text>
                  <text class="info-value">23°C</text>
                </view>
                <view class="info-item">
                  <text class="info-label">湿度:</text>
                  <text class="info-value">45%</text>
                </view>
                <view class="info-item">
                  <text class="info-label">空载率:</text>
                  <text class="info-value">18%</text>
                </view>
                <view class="view-monitor">查看监控</view>
              </view>
            </view>

            <!-- 冷链存储区 -->
            <view class="storage-area cold">
              <view class="area-header">
                <text class="area-name">冷链存储区</text>
                <text class="area-slots">180个库位</text>
              </view>
              <view class="area-info">
                <view class="info-item">
                  <text class="info-label">温度:</text>
                  <text class="info-value">4°C</text>
                </view>
                <view class="info-item">
                  <text class="info-label">湿度:</text>
                  <text class="info-value">60%</text>
                </view>
                <view class="info-item">
                  <text class="info-label">空载率:</text>
                  <text class="info-value">25%</text>
                </view>
                <view class="view-monitor">查看监控</view>
              </view>
            </view>

            <!-- 危险品存储区 -->
            <view class="storage-area danger">
              <view class="area-header">
                <text class="area-name">危险品存储区</text>
                <text class="area-slots">50个库位</text>
              </view>
              <view class="area-info">
                <view class="info-item">
                  <text class="info-label">温度:</text>
                  <text class="info-value">21°C</text>
                </view>
                <view class="info-item">
                  <text class="info-label">湿度:</text>
                  <text class="info-value">35%</text>
                </view>
                <view class="info-item">
                  <text class="info-label">空载率:</text>
                  <text class="info-value">32%</text>
                </view>
                <view class="view-monitor">查看监控</view>
              </view>
            </view>
          </view>
        </view>
      </view>

      <!-- 右侧区域：入库/出库信息 -->
      <view class="right-panel">
        <!-- 入库信息 -->
        <view class="panel-card">
          <text class="panel-title">入库信息</text>
          <view class="inbound-stats">
            <view class="stat-item">
              <text class="stat-label">申请单数</text>
              <text class="stat-value">28</text>
            </view>
            <view class="stat-item success">
              <text class="stat-label">已验收</text>
              <text class="stat-value">22</text>
            </view>
            <view class="stat-item warning">
              <text class="stat-label">待审核</text>
              <text class="stat-value">4</text>
            </view>
            <view class="stat-item primary">
              <text class="stat-label">已归档</text>
              <text class="stat-value">20</text>
            </view>
          </view>

          <view class="inbound-charts">
            <view class="chart-wrapper">
              <text class="chart-title">入库状态占比</text>
              <canvas id="inboundStatusChart" canvas-id="inboundStatusChart" class="chart"></canvas>
            </view>
            <view class="chart-wrapper">
              <text class="chart-title">入库类别占比</text>
              <canvas id="inboundCategoryChart" canvas-id="inboundCategoryChart" class="chart"></canvas>
            </view>
          </view>

          <view class="diff-info">
            <text class="diff-title">入库差异</text>
            <view class="diff-stats">
              <view class="diff-item">
                <text class="diff-value">3</text>
                <text class="diff-label">差异单数</text>
              </view>
              <view class="diff-item">
                <text class="diff-value">5</text>
                <text class="diff-label">差异SKU</text>
              </view>
              <view class="diff-item">
                <text class="diff-value">10.7%</text>
                <text class="diff-label">差异占比</text>
              </view>
            </view>
          </view>
        </view>

        <!-- 出库信息 -->
        <view class="panel-card">
          <text class="panel-title">出库信息</text>
          <view class="outbound-stats">
            <view class="stat-item">
              <text class="stat-label">出库单数</text>
              <text class="stat-value">36</text>
            </view>
            <view class="stat-item primary">
              <text class="stat-label">已分拣</text>
              <text class="stat-value">30</text>
            </view>
            <view class="stat-item warning">
              <text class="stat-label">待审核</text>
              <text class="stat-value">2</text>
            </view>
            <view class="stat-item success">
              <text class="stat-label">已出库</text>
              <text class="stat-value">28</text>
            </view>
          </view>

          <view class="outbound-charts">
            <view class="chart-wrapper">
              <text class="chart-title">出库状态占比</text>
              <canvas id="outboundStatusChart" canvas-id="outboundStatusChart" class="chart"></canvas>
            </view>
            <view class="chart-wrapper">
              <text class="chart-title">出库类别占比</text>
              <canvas id="outboundCategoryChart" canvas-id="outboundCategoryChart" class="chart"></canvas>
            </view>
          </view>

          <view class="diff-info">
            <text class="diff-title">出库差异</text>
            <view class="diff-stats">
              <view class="diff-item">
                <text class="diff-value">2</text>
                <text class="diff-label">差异单数</text>
              </view>
              <view class="diff-item">
                <text class="diff-value">3</text>
                <text class="diff-label">差异SKU</text>
              </view>
              <view class="diff-item">
                <text class="diff-value">5.6%</text>
                <text class="diff-label">差异占比</text>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 物流状态和财务状况 -->
    <view class="bottom-section">
      <!-- 物流状态表 -->
      <view class="panel-card logistics-panel">
        <text class="panel-title">今日物流状态</text>
        <view class="table-container">
          <table class="logistics-table">
            <thead>
              <tr>
                <th>物流类别</th>
                <th>单数</th>
                <th>在途数量</th>
                <th>已完成数</th>
                <th>完成履约占比</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>采购入库</td>
                <td>15</td>
                <td>3</td>
                <td>12</td>
                <td>
                  <view class="progress-bar">
                    <view class="progress-fill" style="width: 80%"></view>
                  </view>
                  <text class="progress-text">80%</text>
                </td>
              </tr>
              <tr>
                <td>销售出库</td>
                <td>28</td>
                <td>5</td>
                <td>23</td>
                <td>
                  <view class="progress-bar">
                    <view class="progress-fill" style="width: 82%"></view>
                  </view>
                  <text class="progress-text">82%</text>
                </td>
              </tr>
              <tr>
                <td>调拨入库</td>
                <td>7</td>
                <td>2</td>
                <td>5</td>
                <td>
                  <view class="progress-bar">
                    <view class="progress-fill" style="width: 71%"></view>
                  </view>
                  <text class="progress-text">71%</text>
                </td>
              </tr>
              <tr>
                <td>调拨出库</td>
                <td>4</td>
                <td>1</td>
                <td>3</td>
                <td>
                  <view class="progress-bar">
                    <view class="progress-fill" style="width: 75%"></view>
                  </view>
                  <text class="progress-text">75%</text>
                </td>
              </tr>
              <tr>
                <td>退货入库</td>
                <td>3</td>
                <td>0</td>
                <td>3</td>
                <td>
                  <view class="progress-bar">
                    <view class="progress-fill" style="width: 100%"></view>
                  </view>
                  <text class="progress-text">100%</text>
                </td>
              </tr>
            </tbody>
          </table>
        </view>
      </view>

      <!-- 仓库财务状况 -->
      <view class="panel-card finance-panel">
        <text class="panel-title">仓库财务状况</text>
        <view class="finance-items">
          <view class="finance-item">
            <view class="finance-header">
              <text class="finance-name">仓储容积费用</text>
              <text class="finance-value">¥28,500</text>
            </view>
            <view class="finance-progress">
              <view class="progress-fill" style="width: 75%"></view>
            </view>
          </view>
          
          <view class="finance-item">
            <view class="finance-header">
              <text class="finance-name">分拣费用</text>
              <text class="finance-value">¥12,300</text>
            </view>
            <view class="finance-progress">
              <view class="progress-fill" style="width: 40%"></view>
            </view>
          </view>
          
          <view class="finance-item">
            <view class="finance-header">
              <text class="finance-name">拆箱费用</text>
              <text class="finance-value">¥5,800</text>
            </view>
            <view class="finance-progress">
              <view class="progress-fill" style="width: 20%"></view>
            </view>
          </view>
          
          <view class="finance-item">
            <view class="finance-header">
              <text class="finance-name">包装费用</text>
              <text class="finance-value">¥9,600</text>
            </view>
            <view class="finance-progress">
              <view class="progress-fill" style="width: 32%"></view>
            </view>
          </view>
          
          <view class="finance-item">
            <view class="finance-header">
              <text class="finance-name">装卸费用</text>
              <text class="finance-value">¥7,200</text>
            </view>
            <view class="finance-progress">
              <view class="progress-fill" style="width: 25%"></view>
            </view>
          </view>
          
          <view class="finance-item">
            <view class="finance-header">
              <text class="finance-name">其它费用</text>
              <text class="finance-value">¥3,400</text>
            </view>
            <view class="finance-progress">
              <view class="progress-fill" style="width: 12%"></view>
            </view>
          </view>
          
          <view class="finance-total">
            <text class="total-label">今日总计</text>
            <text class="total-value">¥66,800</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import * as echarts from 'echarts';

export default {
  data() {
    return {
      currentDate: '',
      currentTime: '',
      charts: {}
    };
  },

  onReady() {
    this.$nextTick(() => {
      this.initCharts();
    });
  },

  methods: {
    // 更新日期时间
    updateDateTime() {
      const now = new Date();
      this.currentDate = now.toLocaleDateString('zh-CN', {
        year: 'numeric',
        month: 'long',
        day: 'numeric',
        weekday: 'long'
      });
      this.currentTime = now.toLocaleTimeString('zh-CN', {
        hour: '2-digit',
        minute: '2-digit',
        second: '2-digit'
      });
    },

    // 获取Canvas元素（兼容H5和小程序）
    async getCanvasElement(canvasId) {
      return new Promise((resolve, reject) => {
        if (process.env.VUE_APP_PLATFORM === 'h5') {
          const dom = document.getElementById(canvasId);
          if (dom) {
            resolve(dom);
          } else {
            reject(new Error(`H5未找到Canvas元素: ${canvasId}`));
          }
        } else {
          uni.createSelectorQuery()
            .in(this)
            .select(`#${canvasId}`)
            .fields({ node: true, size: true })
            .exec((res) => {
              if (!res || !res[0]) {
                reject(new Error(`小程序未找到Canvas元素: ${canvasId}`));
                return;
              }
              const canvasNode = res[0].node;
              const dpr = uni.getSystemInfoSync().pixelRatio || 1;
              canvasNode.width = res[0].width * dpr;
              canvasNode.height = res[0].height * dpr;
              resolve(canvasNode);
            });
        }
      });
    },

    // 初始化所有图表
    async initCharts() {
      try {
        await this.initVolumeTrendChart();
        await this.initInboundStatusChart();
        await this.initInboundCategoryChart();
        await this.initOutboundStatusChart();
        await this.initOutboundCategoryChart();
      } catch (error) {
        console.error('图表初始化失败:', error);
      }
    },

    // 容积趋势图初始化
    async initVolumeTrendChart() {
      try {
        const canvasElement = await this.getCanvasElement('volumeTrendChart');
        const chart = echarts.init(canvasElement);
        this.charts.volumeTrendChart = chart;

        const option = {
          tooltip: { trigger: 'axis' },
          grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: ['7天前', '6天前', '5天前', '4天前', '3天前', '2天前', '昨天', '今天']
          },
          yAxis: { type: 'value' },
          series: [{
            name: '已用容积 (m³)',
            type: 'line',
            data: [17200, 17500, 17800, 17600, 17900, 18100, 18000, 18200],
            lineStyle: { color: '#165DFF' },
            areaStyle: { color: 'rgba(22, 93, 255, 0.1)' },
            smooth: true
          }]
        };
        chart.setOption(option);
      } catch (error) {
        console.error('容积趋势图初始化失败:', error);
      }
    },

    // 入库状态占比图初始化
    async initInboundStatusChart() {
      try {
        const canvasElement = await this.getCanvasElement('inboundStatusChart');
        const chart = echarts.init(canvasElement);
        this.charts.inboundStatusChart = chart;

        const option = {
          tooltip: { trigger: 'item' },
          legend: { bottom: 0, left: 'center', textStyle: { fontSize: 11 } },
          series: [{
            type: 'pie',
            radius: ['70%', '90%'],
            data: [
              { value: 22, name: '已验收', itemStyle: { color: '#00B42A' } },
              { value: 4, name: '待审核', itemStyle: { color: '#FF7D00' } },
              { value: 20, name: '已归档', itemStyle: { color: '#165DFF' } },
              { value: 2, name: '其他', itemStyle: { color: '#86909C' } }
            ]
          }]
        };
        chart.setOption(option);
      } catch (error) {
        console.error('入库状态占比图初始化失败:', error);
      }
    },

    // 入库类别占比图初始化
    async initInboundCategoryChart() {
      try {
        const canvasElement = await this.getCanvasElement('inboundCategoryChart');
        const chart = echarts.init(canvasElement);
        this.charts.inboundCategoryChart = chart;

        const option = {
          tooltip: { trigger: 'item' },
          legend: { bottom: 0, left: 'center', textStyle: { fontSize: 11 } },
          series: [{
            type: 'pie',
            radius: '80%',
            data: [
              { value: 35, name: '电子产品', itemStyle: { color: '#165DFF' } },
              { value: 25, name: '服装鞋帽', itemStyle: { color: '#722ED1' } },
              { value: 20, name: '家居用品', itemStyle: { color: '#FF7D00' } },
              { value: 20, name: '食品饮料', itemStyle: { color: '#0FC6C2' } }
            ]
          }]
        };
        chart.setOption(option);
      } catch (error) {
        console.error('入库类别占比图初始化失败:', error);
      }
    },

    // 出库状态占比图初始化
    async initOutboundStatusChart() {
      try {
        const canvasElement = await this.getCanvasElement('outboundStatusChart');
        const chart = echarts.init(canvasElement);
        this.charts.outboundStatusChart = chart;

        const option = {
          tooltip: { trigger: 'item' },
          legend: { bottom: 0, left: 'center', textStyle: { fontSize: 11 } },
          series: [{
            type: 'pie',
            radius: ['70%', '90%'],
            data: [
              { value: 30, name: '已分拣', itemStyle: { color: '#165DFF' } },
              { value: 2, name: '待审核', itemStyle: { color: '#FF7D00' } },
              { value: 28, name: '已出库', itemStyle: { color: '#00B42A' } },
              { value: 4, name: '其他', itemStyle: { color: '#86909C' } }
            ]
          }]
        };
        chart.setOption(option);
      } catch (error) {
        console.error('出库状态占比图初始化失败:', error);
      }
    },

    // 出库类别占比图初始化
    async initOutboundCategoryChart() {
      try {
        const canvasElement = await this.getCanvasElement('outboundCategoryChart');
        const chart = echarts.init(canvasElement);
        this.charts.outboundCategoryChart = chart;

        const option = {
          tooltip: { trigger: 'item' },
          legend: { bottom: 0, left: 'center', textStyle: { fontSize: 11 } },
          series: [{
            type: 'pie',
            radius: '80%',
            data: [
              { value: 30, name: '电子产品', itemStyle: { color: '#165DFF' } },
              { value: 30, name: '服装鞋帽', itemStyle: { color: '#722ED1' } },
              { value: 25, name: '家居用品', itemStyle: { color: '#FF7D00' } },
              { value: 15, name: '食品饮料', itemStyle: { color: '#0FC6C2' } }
            ]
          }]
        };
        chart.setOption(option);
      } catch (error) {
        console.error('出库类别占比图初始化失败:', error);
      }
    },

    // 添加卡片加载动画
    addCardAnimation() {
      const cards = document.querySelectorAll('.panel-card');
      cards.forEach((card, index) => {
        card.style.opacity = '0';
        card.style.transform = 'translateY(20px)';
        card.style.transition = 'opacity 0.5s ease, transform 0.5s ease';
        
        setTimeout(() => {
          card.style.opacity = '1';
          card.style.transform = 'translateY(0)';
        }, 100 + index * 100);
      });
    }
  },

  onLoad() {
    this.updateDateTime();
    setInterval(this.updateDateTime, 1000);
    this.addCardAnimation();
  },

  onResize() {
    Object.values(this.charts).forEach(chart => {
      chart && chart.resize();
    });
  },

  onUnload() {
    Object.values(this.charts).forEach(chart => {
      chart && chart.dispose();
    });
  }
};
</script>

<style lang="scss" scoped>
.container {
  padding: 16px;
  background-color: #F2F3F5;
  min-height: 100vh;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.header-left .page-title {
  font-size: 24px;
  font-weight: bold;
  color: #1D2129;
  margin-bottom: 4px;
}

.header-left .warehouse-info {
  font-size: 14px;
  color: #4E5969;
}

.header-right .datetime-card {
  background-color: white;
  border-radius: 12px;
  padding: 12px 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.header-right .current-date {
  font-weight: 500;
  color: #1D2129;
}

.header-right .current-time {
  font-size: 14px;
  color: #86909C;
}

.stats-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 20px;
}

.stat-card {
  background-color: white;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
}

.stat-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}

.stat-title {
  color: #86909C;
  font-size: 14px;
  margin-bottom: 8px;
}

.stat-value {
  color: #1D2129;
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 4px;
}

.stat-trend {
  font-size: 12px;
  color: #00B42A;
}

.main-content {
  display: flex;
  gap: 16px;
  margin-bottom: 20px;
}

.left-panel {
  flex: 1;
}

.right-panel {
  flex: 1;
}

.panel-card {
  background-color: white;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  margin-bottom: 16px;
}

.panel-title {
  font-size: 18px;
  font-weight: 600;
  color: #1D2129;
  margin-bottom: 16px;
}

.panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.chart-period-selector {
  display: flex;
  gap: 8px;
}

.period-btn {
  padding: 4px 12px;
  font-size: 12px;
  border-radius: 999px;
  border: none;
  background-color: #F2F3F5;
  color: #86909C;
}

.period-btn.active {
  background-color: rgba(22, 93, 255, 0.1);
  color: #165DFF;
}

.chart-container {
  height: 250px;
}

.storage-areas {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.storage-area {
  padding: 12px;
  border-radius: 8px;
  border: 1px solid #E5E6EB;
}

.storage-area.normal {
  border-left: 4px solid #165DFF;
}

.storage-area.cold {
  border-left: 4px solid #86909C;
}

.storage-area.danger {
  border-left: 4px solid #F53F3F;
}

.area-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 12px;
}

.area-name {
  font-weight: 500;
  color: #1D2129;
}

.area-slots {
  font-size: 12px;
  color: #86909C;
}

.area-info {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.info-item {
  display: flex;
  justify-content: space-between;
}

.info-label {
  font-size: 14px;
  color: #4E5969;
}

.info-value {
  font-size: 14px;
  font-weight: 500;
  color: #1D2129;
}

.view-monitor {
  color: #165DFF;
  font-size: 14px;
  text-align: right;
  cursor: pointer;
}

.inbound-stats, .outbound-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 20px;
}

.stat-item {
  background-color: #F2F3F5;
  border-radius: 8px;
  padding: 12px;
  text-align: center;
}

.stat-label {
  font-size: 12px;
  color: #86909C;
  display: block;
  margin-bottom: 4px;
}

.stat-value {
  font-size: 24px;
  font-weight: bold;
  color: #1D2129;
}

.stat-item.success .stat-value {
  color: #00B42A;
}

.stat-item.warning .stat-value {
  color: #FF7D00;
}

.stat-item.primary .stat-value {
  color: #165DFF;
}

.inbound-charts, .outbound-charts {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-bottom: 20px;
}

.chart-wrapper {
  height: 180px;
}

.chart-title {
  font-size: 14px;
  font-weight: 500;
  color: #1D2129;
  margin-bottom: 8px;
}

.chart {
  width: 100%;
  height: 100%;
}

.diff-info {
  background-color: rgba(245, 63, 63, 0.1);
  border: 1px solid rgba(245, 63, 63, 0.2);
  border-radius: 8px;
  padding: 12px;
}

.diff-title {
  font-size: 14px;
  font-weight: 500;
  color: #F53F3F;
  margin-bottom: 8px;
}

.diff-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.diff-item {
  text-align: center;
}

.diff-value {
  font-weight: bold;
  color: #F53F3F;
  display: block;
}

.diff-label {
  font-size: 12px;
  color: #4E5969;
}

.bottom-section {
  display: flex;}
 .bottom-section {
   display: flex;
   gap: 16px;
 }
 
 .logistics-panel, .finance-panel {
   flex: 1;
 }
 
 .logistics-table {
   width: 100%;
   border-collapse: collapse;
 }
 
 .logistics-table th, .logistics-table td {
   padding: 12px 16px;
   text-align: left;
   border-bottom: 1px solid #E5E6EB;
 }
 
 .logistics-table th {
   font-weight: 600;
   color: #4E5969;
   background-color: #F7F8FA;
 }
 
 .logistics-table td {
   color: #1D2129;
 }
 
 .progress-bar {
   height: 8px;
   background-color: #F2F3F5;
   border-radius: 4px;
   overflow: hidden;
 }
 
 .progress-fill {
   height: 100%;
   border-radius: 4px;
   transition: width 0.5s ease;
 }
 
 .progress-fill[style*="80%"] { background-color: #165DFF; }
 .progress-fill[style*="82%"] { background-color: #165DFF; }
 .progress-fill[style*="71%"] { background-color: #165DFF; }
 .progress-fill[style*="75%"] { background-color: #165DFF; }
 .progress-fill[style*="100%"] { background-color: #00B42A; }
 
 .progress-text {
   display: block;
   margin-top: 4px;
   font-size: 12px;
   color: #86909C;
   text-align: center;
 }
 
 .finance-items {
   display: flex;
   flex-direction: column;
   gap: 12px;
 }
 
 .finance-item {
   background-color: #F7F8FA;
   border-radius: 8px;
   padding: 12px 16px;
 }
 
 .finance-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-bottom: 8px;
 }
 
 .finance-name {
   font-size: 14px;
   color: #4E5969;
 }
 
 .finance-value {
   font-size: 16px;
   font-weight: 500;
   color: #1D2129;
 }
 
 .finance-progress {
   height: 6px;
   background-color: #E5E6EB;
   border-radius: 3px;
   overflow: hidden;
 }
 
 .finance-progress .progress-fill {
   height: 100%;
   background-color: #165DFF;
 }
 
 .finance-total {
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-top: 16px;
   padding-top: 16px;
   border-top: 1px solid #E5E6EB;
 }
 
 .total-label {
   font-size: 16px;
   font-weight: 500;
   color: #4E5969;
 }
 
 .total-value {
   font-size: 18px;
   font-weight: bold;
   color: #1D2129;
 } 
</style>